﻿@model SimpleScrum.Areas.Admin.Models.ManageRolesViewModel
@{
    ViewBag.Title = "Role View";
}
<div class="breadcrumbs" id="breadcrumbs">
    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="@Url.Action("Index","ControlPanel")">Home</a>
            <span class="divider">
                <i class="icon-angle-right arrow-icon"></i>
            </span>
        </li>
        <li class="active">Control Panel</li>
    </ul>
    <!--.breadcrumb-->
    <div class="nav-search" id="nav-search">
        <form class="form-search">
            <span class="input-icon">
                <input type="text" plscrumholder="Search ..." class="input-small nav-search-input" id="nav-search-input" autocomplete="off" />
                <i class="icon-search nav-search-icon"></i>
            </span>
        </form>
    </div>
</div>
<div class="page-content">
    <h2>@ViewBag.Title</h2>
    <h2>Manage Roles</h2>
    <ul class="system_messages" style="display: none;">
    </ul>
    <div>
        <fieldset>
            <p>
                Role Name<br />
                @Html.TextBox("RoleName")
            </p>
            <p>
                <button id="add-role">
                    Add</button></p>
            <hr />
            <p>
                Roles<br />
                @Html.ListBox("Roles", Model.Roles, new { height = "120px", width = "200px" })
            </p>
            <p>
                @Html.CheckBox("throwOnPopulatedRole")&nbsp;Delete role if it has users? <br />(Recommended:
                un-checked)<br />
                <button id="delete-roles">
                    Delete</button></p>
        </fieldset>
    </div>
    <div class="fr w48pc">
        <fieldset>
            <p>
                Get Users In Role<br />
                @Html.DropDownList("RolesList", Model.Roles, "[Select Role]")
            </p>
            <div id="users-in-role-div" style="display: none;">
                <p>
                    Users In Role
                </p>
                <ul>
                </ul>
            </div>
        </fieldset>
    </div>
</div>

<script type="text/javascript">

    $(function () {

        var message = $(".system_messages");


        /***********************************************
        * Begin Add Role Functions
        ***********************************************/
        $("#add-role").click(function () {
            var roleName = $("#RoleName").val();

            if (roleName == "") {
                ShowMessage("Please enter a role name.");
                return;
            }

            $.ajax({
                url: '@Url.Action("CreateRole", "Role")',
                dataType: 'json',
                type: 'POST',
                cache: false,
                data: { roleName: roleName },
                success: OnCreateRoleSuccess,
                error: OnCreateRoleError
            });
        });

        function OnCreateRoleSuccess(data) {
            $("li", message).remove();
            if (data.Success) {
                $("#RoleName").val("");

                GetAllRoles("Roles");
                GetAllRoles("RolesList");
            } else {
                $("#RoleName").val("");
            }

            DisplayMessage(data);
            message.show().delay(5000).fadeOut();
        }

        function OnCreateRoleError(xhr, status, error) {
            message.show().delay(5000).fadeOut();    // Show the message
            $("li", message).addClass("red");      // Apply the Green style
            $("strong", message).text(error); // Insert the message
        }

        $("#RoleName").keyup(function () {
            var text = $(this).val();
            if (text != "") {
                $("strong", message).text("");
            }
        });


        /***********************************************
        * End Add Role Functions
        ***********************************************/




        /***********************************************
        * Begin Delete Role Functions
        ***********************************************/

        $("#delete-roles").click(function () {
            var rolesList = $("#Roles");

            if (rolesList.val() == null) {
                ShowMessage("Please select at least one role to delete.");
                return;
            }

            if (!confirm("Are you sure you want to delete these Roles?  This cannot be undone!")) {
                return;
            }

            var chkBox = $("#throwOnPopulatedRole");
            var throwOnPopRole = !chkBox.is(":checked");

            var roles = "";

            $.each(rolesList.val(), function (index, data) {
                if (data != undefined) {
                    roles += data + ",";
                }
            });

            $.ajax({
                url: '@Url.Action("DeleteRoles", "Role")',
                dataType: 'json',
                type: 'POST',
                cache: false,
                data: { roles: roles, throwOnPopulatedRole: throwOnPopRole },
                success: OnDeleteRoleSuccess,
                error: OnDeleteRoleError
            });
        });

        function OnDeleteRoleSuccess(data) {
            if (data.Success) {
                $("li", message).remove();  // remove all li from the system_messages ul element.
                $.each(data.Messages, function (index, item) {
                    if (item.Success) {
                        // Refresh Roles lists
                        GetAllRoles("Roles");
                        GetAllRoles("RolesList");
                    }

                    // Show the message
                    DisplayMessage(item);
                });
                message.show().delay(5000).fadeOut();
            }
        }

        function OnDeleteRoleError(xhr, status, error) {
            DisplayError(error);
            message.show().delay(5000).fadeOut();
        }

        /***********************************************
        * End Delete Role Functions
        ***********************************************/








        /***********************************************
        * Begin Get Users In Role Functions
        ***********************************************/

        //users-in-role-div

        var usersInRoleDiv = $("#users-in-role-div");
        var ul = $("#users-in-role-div ul");

        $("#RolesList").change(function () {
            var item = $(this).val();

            if (item != "") {
                usersInRoleDiv.show();

                $.ajax({
                    url: '@Url.Action("GetUsersInRole", "Role")',
                    dataType: 'json',
                    type: 'GET',
                    cache: false,
                    data: { roleName: item },
                    success: OnGetUsersInRoleSuccess,
                    error: OnGetUsersInRoleError
                });
            } else {
                $("#users-in-role-div").hide();
            }
        });

        function OnGetUsersInRoleSuccess(data) {
            ul.empty();
            if (data == "") {
                ul.append("<li>No user(s).</li>");
            } else {
                $.each(data, function (index, item) {
                    ul.append("<li><a href=\"/SecurityGuard/Membership/Update/" + item + "\">" + item + "</a></li>");
                });
            }
        }

        function OnGetUsersInRoleError(xhr, status, error) {
            message.show().delay(5000).fadeOut();    // Show the message
            $("li", message).addClass("red");      // Apply the Green style
            $("strong", message).text(error); // Insert the message
        }

        /***********************************************
        * End Get Users In Role Functions
        ***********************************************/










        /***********************************************
        * Begin Common Role Functions
        ***********************************************/

        function GetAllRoles(selectObject) {
            $.ajax({
                url: '@Url.Action("GetAllRoles", "Role")',
                dataType: 'json',
                type: 'GET',
                cache: false,
                success: function (data) {
                    var rolesList = $("#" + selectObject);
                    rolesList.loadSelect(data);
                }
            });
        }


        //<ul class="system_messages" style="display: none;">
        //    <li><span class="ico"></span><strong class="system_title"></strong></li>
        //</ul>

        function DisplayError(error) {
            var li = $("<li></li>").addClass("red");
            var span = $("<span></span>").addClass("ico").appendTo(li);
            var strong = $("<strong></strong>").addClass("system_title").html(error).appendTo(li);

            li.appendTo(message);
        }

        function DisplayMessage(data) {
            var li = $("<li></li>").addClass(data.CssClass);
            var span = $("<span></span>").addClass("ico").appendTo(li);
            var strong = $("<strong></strong>").addClass("system_title").html(data.Message).appendTo(li);

            li.appendTo(message);
        }

        function ShowMessage(msg) {
            $("li", message).remove();
            var li = $("<li></li>").addClass("yellow");
            var span = $("<span></span>").addClass("ico").appendTo(li);
            var strong = $("<strong></strong>").addClass("system_title").html(msg).appendTo(li);

            li.appendTo(message);
            message.show().delay(5000).fadeOut();
        }

        /***********************************************
        * End Common Role Functions
        ***********************************************/


    });



</script>
